<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:21:20
-->
<template>
  <div class="notice_main">
    <div class="notice_pic">
      <el-carousel
        trigger="click"
        height="400px"
      >
        <el-carousel-item v-for="item in noticeArray" :key="item.src">
          <img class="notice_pic_picture" :src="item.src" @click="checkNotice(item)">
          <span class="notice_pic_title" @click="checkNotice(item)">{{ item.title }}</span>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="notice_title">
      <span class="notice_title_header">通知公告　　　　　　</span>
      <div
        class="notice_title_info"
        v-for="item in defaultNotice.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        :key="item.title"
      >
        <span
          class="notice_title_info_content"
          @click="checkNotice(item)"
        >
          {{ item.title }}
        </span>
        <span class="notice_title_info_time">
          <i class="el-icon-time"/>
          {{ item.publishTime }}
        </span>
      </div>
      <el-pagination
        style="position: relative; bottom: -50px;"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="defaultNotice.length"
        layout="prev, pager, next"
        hide-on-single-page
      />
    </div>
  </div>
</template>

<script>
import {
  userCheckAdminNotice,
  userCheckApproverNotice
} from '@/api/commonUser/userNotice';
export default {
  data() {
    return {
      noticeArray: [],
      defaultNotice: [],
      currentPage: 1,
      pageSize: 8 // 设置分页数
    }
  },
  created() {
    this.initNotice();
  },
  methods: {
    initNotice() {
      userCheckAdminNotice().then((data) => {
        if (data) {
          data.forEach(obj => {
            const item = obj;
            item.isAdmin = true;
            this.defaultNotice.push(item);
          });
        }
        userCheckApproverNotice().then((data) => {
          if (data) {
            data.forEach(obj => {
              const item = obj;
              item.isAdmin = false;
              this.defaultNotice.push(item);
            })
          }
          this.defaultNotice.sort((a, b) => {
            if (a.publishTime < b.publishTime) return 1;
            else return -1;
          });
          for (let i = 0 ; i < Math.min(4, this.defaultNotice.length); ++i) {
            const item = this.defaultNotice[i];
            item.src = require(`@/assets/notice/image${i+1}.png`);
            this.noticeArray.push(item);
          }
        });
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    checkNotice(val) {
      this.$store.commit('commonUser/setNotice', val);
      this.$router.push('noticeDetail');
    }
  }
}
</script>

<style lang="scss">
.notice_main {
  min-width: 700px;
  
  .notice_pic {
    float: left;
    width: calc(100% - 650px);
    margin: 50px 0px 50px 50px;
    
    .notice_pic_picture {
      height: 370px;
      width: 100%;
    }

    .notice_pic_title {
      cursor: pointer;
      height: 30px;
      font-size: 20px;
      color: #FFFFFF;
      padding: 0px 0px 0px 5px;
    }
  }

  .notice_title {
    cursor: pointer;
    float: right;
    height: 700px;
    width: 500px;
    background: #FFFFFF;
    margin: 50px 50px 50px 50px;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);

    .notice_title_header {
      position: relative;
      top: 20px;
      left: 20px;
      width: 100px;
      font-size: 26px;
      font-weight: bold;
      color: #005187;
      border-bottom: 3px solid #005187;
    }

    .notice_title_info {
      background: #F3F3F3;
      position: relative;
      top: 50px;
      height: 50px;
      width: 90%;
      margin: 0px auto 20px auto;
      border-radius: 5px;

      .notice_title_info_content {
        color: #176CC4;
        display: block;
        text-overflow: ellipsis;
        overflow-x: hidden;
        font-size: 18px;
        padding-left: 5px;
      }

      .notice_title_info_time {
        float: right;
        font-size: 14px;
        color: #8C8C8C;
        padding: 5px 5px 0px 0px;
      }
    }
  }
}

.el-carousel__item {
  background-color: #99a9bf;
}

</style>

<style lang="scss" scoped>
@media screen and (max-width: 1350px){
  .notice_pic {
    float: none;
    width: calc(min(100% - 100px, 600px));
    margin: 50px auto 50px auto;
  }

  .notice_title {
    float: none;
    margin: 0px calc((100% - 500px) / 2) 50px calc((100% - 500px) / 2);
  }
}

</style>
